angular.module('app.view.fan-data-problem')

    .directive('fanDataProblemChart', ['$window', function($window) {
        return {
            scope:'=',
            restrict: 'EA',
            link: function($scope, element, attrs) {
                let myChart = echarts.init(element[0]);

                $scope.$watch("{chartTitle:chartTitle, chartSeries:chartSeries}", function(newValue, oldValue){
                    if(newValue === oldValue)
                        return;

                    let title = $scope.chartTitle;
                    let chartSeries = $scope.chartSeries;
                    let xData = [];
                    for(let i = 0; i < chartSeries[0].data.length; i++)
                        xData.push(i);
                    
                    let option = {
                        title: {
                            text: title,
                            x: 'center'
                        },
                        tooltip: {
                            trigger: 'axis'
                        },
                        xAxis: [{
                            show: true,
                            type: 'category',
                            data: xData,
                            axisLabel: {
                                show: false,
                                interval: 0
                            }
                        }],
                        yAxis: [{
                            type: 'value',
                            scale: true,
                        }],
                        dataZoom: [{
                            type: 'inside'
                        }, {
                            type: 'slider',
                            show: false
                        }],
                        series: chartSeries,
                    };

                    myChart.setOption(option, true);
                }, true);
                $window.onresize = function() {
                    myChart.resize();
                }
            }
        }
    }]);
